<template>
  <div>
    <template v-if="listType == 'order'">
      <div class="list_good" v-for="item in barrelList" :key="item.id">
        <img :src="item.thumb" class="gooImg" alt="" />
        <div class="list_good_detail">
          <div class="title">{{ item.title }}</div>
          <div class="num">X{{ item.total }}</div>
        </div>
      </div>
    </template>
    <div v-else-if="listType == 'aftersales'" style="display: flex; flex-direction: column">
      <div class="list" v-for="(item, index) in barrelList" :key="index" style="margin-top: 0.94rem">
        <img :src="item.goods_thumb" class="list_img" alt="" />
        <div class="list_r">
          <div class="list_r_t">
            <div class="list_r_title">{{ item.goods_title }}</div>
          </div>
          <div class="list_r_b">
            <div class="list_r_b_price">
              <div class="total">数量：{{ item.refund_total }}</div>
              <div class="total" style="margin-bottom: 0.47rem; margin-top: 0.5rem; line-height: 0.82rem">
                申请退款金额：<span class="redT">{{ $i18n.t("money") }}{{ item.refund_price }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else-if="listType == 'mixology'">
      <div class="list" v-for="item in barrelList" :key="item.id" style="margin-bottom: 0.94rem">
        <img :src="item.thumb" class="list_img" alt="" />
        <div class="list_r">
          <div class="list_r_t">
            <div class="list_r_title">{{ item.title }}</div>
            <i class="iconfont icon-appointment_delete" v-if="showDel" @click="delList(item.id)"></i>
          </div>
          <div v-if="item.has_option == 1" style="color: #999;">{{ item.option_name }}</div>
          <div class="list_r_b">
            <div class="list_r_b_price">
              <span class="txt">{{ $i18n.t("money") }} {{ item.price }}</span>
              <span class="viptxt" v-if="showVip">会员价：{{ $i18n.t("money") }}{{ item.vip_price }}</span>
            </div>
            <div class="list_r_b_step" v-if="showStepper">
              <van-stepper @change="stepperChange" v-model="item.selectVal" theme="round" button-size="20" :max="item.stock" :min="item.stock ? 1 : 0" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <template v-for="item in barrelList">
        <div class="list" :key="item.id" style="margin-bottom: 0.94rem" v-if="item.has_one_good">
          <img :src="item.has_one_good.thumb" class="list_img" alt="" />
          <div class="list_r">
            <div class="list_r_t">
              <div class="list_r_title">{{ item.has_one_good.title }}</div>
              <i class="iconfont icon-appointment_delete" v-if="showDel" @click="delList(item.has_one_good)"></i>
            </div>
            <div class="list_r_b">
              <div class="list_r_b_price">
                <span class="txt">{{ $i18n.t("money") }} {{ item.has_one_good.price }}</span>
                <span class="viptxt" v-if="showVip">会员价：{{ $i18n.t("money") }}{{ item.has_one_good.vip_price }}</span>
              </div>
              <div class="list_r_b_step" v-if="showStepper">
                <van-stepper v-model="item.has_one_good.selectVal" theme="round" button-size="20" :max="item.left" :min="item.left ? 1 : 0" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    showVip: {
      type: Boolean,
      default: false
    },
    showDel: {
      type: Boolean,
      default: false
    },
    showStepper: {
      type: Boolean,
      default: false
    },
    // order订单列表的，good调酒，预下单的
    listType: {
      type: String,
      default: "good"
    },
    barrelList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    stepperChange(e) {
      console.log(e);
    },
    delList(json) {
      this.$emit("del", json);
    }
  }
};
</script>
<style lang="scss" scoped>
.redT {
  color: #f15353;
}
// 订单的商品列表
.list_good {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.94rem;
  .gooImg {
    width: 5.38rem;
    height: 5.38rem;
    background: #d6d6dc;
    border-radius: 0.63rem;
    margin-right: 0.53rem;
  }
  .list_good_detail {
    margin-top: 0.28rem;
    font-weight: 500;
    font-size: 0.88rem;
    flex: 1;
    display: flex;
    justify-content: space-between;
    .title {
      flex: 1;
      text-align: left;
    }
    .num {
      font-weight: 400;
      flex-shrink: 0;
    }
  }
}
// 调酒 预下单
.list:last-child {
  margin-bottom: 0 !important;
}
.list {
  display: flex;
  justify-content: space-between;
  .list_img {
    margin: 0;
    flex-shrink: 0;
    width: 5.38rem;
    height: 5.38rem;
    background: #d6d6dc;
    border-radius: 0.63rem;
    margin-right: 0.53rem;
  }
  .list_r {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    .list_r_t {
      display: flex;
      .list_r_title {
        flex: 1;
        font-weight: 500;
        font-size: 0.88rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
      }
      .icon-appointment_delete {
        flex-shrink: 0;
        color: #999999;
        margin-left: 0.97rem;
        font-size: 1.2rem;
      }
    }

    .list_r_b {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .list_r_b_price {
        display: flex;
        flex-direction: column;
        text-align: left;
        .txt {
          font-weight: bold;
          font-size: 0.88rem;
        }
        .viptxt {
          font-weight: 500;
          font-size: 0.81rem;
          color: #f38d54;
        }
      }
    }
  }
}
</style>
